//  redux使用步骤:
// 1. 下载redux npm i redux/yarn add redux

import { createStore } from 'redux'

// 2. 创建一个reducer函数
// 假设我们store中state的初始数据 {count: 0,msg: '呵呵'}

// reducer的执行时机:
// 1. createStore的时候,reducer第一次被调用. 就是为了初始化数据
// 2. 只要调用了dispatch方法,reducer就是执行
function reducer(state = { count: 0, msg: '呵呵' }, action) {
  // console.log('reducer函数被调用了', state, action)
  //state 就是源数据
  // action 就是要如何修改数据的描述对象
  switch (action.type) {
    case 'increment':
      // ...操作数据,对数据进行递增
      // const result = state.count + 1
      return {
        ...state, //写...state的目的是为了保留不需要修改的数据
        // count: 0,
        // msg: '呵呵'
        count: state.count + 1,
      }
    case 'decrement':
      // const result = staet.count - 1
      return {
        ...state,
        count: state.count - 1,
      }
    // 一个reducer函数中,必须有一个default. 第一次reducer执行,state接收到的是undefined,则形参默认值生效.此时的state就已经是对象了.然后return出去.store的数据就被改了
    default:
      return state
  }
}

// 3. 创建store对象
// createStore(reducer)
const store = createStore(reducer)

// 4. 获取数据
// store对象.getState() 返回store中存储的最新的数据
// console.log(store.getState())

// 注意要监听,后修改
// 监听store中的数据是否发生变化
store.subscribe(() => {
  // 一旦redux数据发生变化,则这个回调执行
  console.log(store.getState())
})
// 5. 修改数据
// store.dispatch(action对象)
store.dispatch({ type: 'increment' })

store.dispatch({ type: 'increment' })

store.dispatch({ type: 'increment' })
